<template>
  <div class="dome">
      <button @click="isShow = !isShow">显示/隐藏</button>
      <!-- css完成动画 -->
      <h1 v-show="isShow" class="come">你好啊！菜菜同学(css)</h1>
      <!-- 通过vue的transition（单个元素）过度标签完成动画，在css中使用.v-enter-active和.v-leave-active -->
      <transition :appear="true">
      <h1 v-show="isShow">你好啊！菜菜同学(vue)</h1>
      </transition>

    <!-- 可以给transition添加name="xxx"属性，在css中使用.xxx.enter-active和.xxx-leave-active -->
      <transition name="hello" :appear="true">
      <h2 v-show="isShow">大家好，俺是菜菜同学</h2>
      </transition>

      <!-- <transition-group ></transition-group>  多个元素一起使用同一个动画 -->
  </div>
</template>

<script>
export default {
    name:'Test',
    data() {
        return {
            isShow:true
        }
    },
}
</script>

<style scoped>
    h1,h2{
        background-color: orange;
        height: 100px;
    }
    /* 写个css动画 */
    .come{
        animation: dome1 1s;
    }
    .leave{
        animation: dome1 1s reverse;
    }
    /* vue的动画使用 */
    .v-enter-active{
        animation: dome1 1s;
    }
    .v-leave-active{
        animation: dome1 1s reverse;
    }
    /* 动画关键帧 帧名 */
    @keyframes dome1{
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }

    /* 在结构中使用了transition标签，并添加了name属性，默认是v-enter...加了name属性就是 名字-enter... */
    /* 这里可以不指定关键帧 */
    .hello-enter,.hello-leave-to{       /* 来的时候动画的改变起点，离开的时候动画的终点是同一个 */
        transform: translateX(-100%);
    }
    .hello-enter-active,.hello-leave-active{     /* 播放动画 */
        transition: 0.5s linear;
    }
    .hello-enter-to,.hello-leave{ /* 来的时候动画的终点，离开的时候动画改变起点是同一个 */
        transform: translateX(0);
    }
    
    
</style>